<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新竞赛</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写基本信息" />
      <el-step title="新增加题目" />
      <el-step title="提交" />
    </el-steps>
    <el-form label-width="120px" :model="courseInfo" :rules="dataRule" ref="courseInfo">
      <el-form-item label="竞赛标题" prop="title">
        <el-input v-model="courseInfo.title" placeholder=" 示例" />
      </el-form-item>

      <!-- 所属分类 TODO -->

      <el-form-item label="总分数" prop="lessonNum">
        <el-input-number
          :min="0"
          v-model="courseInfo.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>

      <!-- 课程简介-->
      <!-- 课程简介-->
      <el-form-item label="大概简介" prop="description">
        <editor :commits="courseInfo.description" v-if="flag" @func="getMsgFormSon"></editor>
      </el-form-item>

      <!-- 课程封面 TODO -->
      <!-- 课程封面-->
      <el-form-item label="图片" style="margin-top: 80px;" prop="cover">
        <SingleUpload v-model="courseInfo.cover"></SingleUpload>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SingleUpload from "@/components/upload/singleUpload";
import editor from "@/components/editor";

export default {
  data() {
    return {
      flag: false,
      saveBtnDisabled: false, // 保存按钮是否禁用
      courseInfo: {
        title: "",
        subjectId: "", //分类id
        teacherId: "",
        lessonNum: 0,
        description: "",
        cover: "",
        price: 0,
      },
    };
  },
};
</script>
